<template>
  <div class="datetime-picker-demo">
    <n-card title="日期时间选择组件示例" class="demo-card">
      <n-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
        
        <n-form-item label="完整日期时间" path="fullDateTime">
          <date-time-picker
            v-model:value="formData.fullDateTime"
            show-date
            show-time
            clearable
          />
        </n-form-item>

        <n-form-item label="仅日期选择" path="onlyDate">
          <date-time-picker
            v-model:value="formData.onlyDate"
            show-date
            :show-time="false"
            clearable
            date-placeholder="请选择日期"
          />
        </n-form-item>

        <n-form-item label="仅时间选择" path="onlyTime">
          <date-time-picker
            v-model:value="formData.onlyTime"
            :show-date="false"
            show-time
            clearable
            time-placeholder="请选择时间"
          />
        </n-form-item>

        <n-form-item label="禁用状态" path="disabledDateTime">
          <date-time-picker
            v-model:value="formData.disabledDateTime"
            disabled
          />
        </n-form-item>

        <n-form-item label="禁用部分日期" path="disabledDateDateTime">
          <date-time-picker
            v-model:value="formData.disabledDateDateTime"
            :disabled-date="disabledDate"
          />
        </n-form-item>

        <n-form-item>
          <n-button type="primary" @click="submitForm">提交</n-button>
          <n-button @click="resetForm" style="margin-left: 12px">重置</n-button>
        </n-form-item>
      </n-form>
    </n-card>

    <n-card title="选择结果" class="demo-card result-card">
      <pre>{{ result }}</pre>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { NCard, NForm, NFormItem, NButton, useMessage } from 'naive-ui';
import { DateTimePicker } from '@/components/DateTimePicker';
import { formatToDateTime } from '@/utils/dateUtil';

const message = useMessage();
const formRef = ref<NForm | null>(null);

// 表单数据
const formData = reactive({
  fullDateTime: Date.now(),
  onlyDate: Date.now(),
  onlyTime: Date.now(),
  disabledDateTime: Date.now(),
  disabledDateDateTime: null
});

// 表单验证规则
const rules = {
  fullDateTime: {
    required: true,
    message: '请选择完整日期时间',
    trigger: ['blur', 'change']
  },
  onlyDate: {
    required: true,
    message: '请选择日期',
    trigger: ['blur', 'change']
  },
  onlyTime: {
    required: true,
    message: '请选择时间',
    trigger: ['blur', 'change']
  }
};

// 禁用今天之前的日期
const disabledDate = (current: number) => {
  // 今天的0点
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  // 禁用今天之前的日期
  return current < today.getTime();
};

// 提交表单
const submitForm = () => {
  formRef.value?.validate((errors) => {
    if (!errors) {
      // 格式化结果以便显示
      const formattedResult = {
        fullDateTime: formData.fullDateTime ? formatToDateTime(formData.fullDateTime) : null,
        onlyDate: formData.onlyDate ? formatToDateTime(formData.onlyDate, 'yyyy-MM-dd') : null,
        onlyTime: formData.onlyTime ? formatToDateTime(formData.onlyTime, 'HH:mm:ss') : null,
        disabledDateTime: formData.disabledDateTime ? formatToDateTime(formData.disabledDateTime) : null,
        disabledDateDateTime: formData.disabledDateDateTime ? formatToDateTime(formData.disabledDateDateTime) : null
      };
      result.value = JSON.stringify(formattedResult, null, 2);
      message.success('提交成功');
    } else {
      message.error('验证失败');
    }
  });
};

// 重置表单
const resetForm = () => {
  formRef.value?.reset();
  result.value = '';
};

// 结果展示
const result = ref('');
</script>

<style lang="less" scoped>
.datetime-picker-demo {
  padding: 20px;
  
  .demo-card {
    margin-bottom: 20px;
  }
  
  .result-card {
    pre {
      background-color: #f5f5f5;
      padding: 10px;
      border-radius: 4px;
      white-space: pre-wrap;
    }
  }
}
</style>